<template>
  <div>
    <el-card>
      <div slot="header">
        <span>添加商品</span>
      </div>
      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="商品名称">
                  <span>{{ props.row.name }}</span>
                </el-form-item>
                <el-form-item label="所属分类">
                  <span>{{ props.row.category }}</span>
                </el-form-item>
                <el-form-item label="商品价格">
                  <span>{{ props.row.price }}</span>
                </el-form-item>
                <!-- 图 -->
                <el-form-item label="商品图片">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="imgUrl"
                  ></el-image>
                </el-form-item>
                <el-form-item label="店铺 ID">
                  <span>{{ props.row.shopId }}</span>
                </el-form-item>
                <el-form-item label="商品分类">
                  <span>{{ props.row.category }}</span>
                </el-form-item>
                <el-form-item label="店铺地址">
                  <span>{{ props.row.address }}</span>
                </el-form-item>
                <el-form-item label="商品描述">
                  <span>{{ props.row.desc }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" prop="name"></el-table-column>
          <el-table-column label="所属分类" prop="category"></el-table-column>
          <el-table-column label="商品价格" prop="price"></el-table-column>
          <el-table-column label="商品图片" prop="imgUrl"></el-table-column>
          <el-table-column label="商品描述" prop="goodsDesc"></el-table-column>
          <!-- 操作 -->
          <el-table-column label="操作">
            <template>
              <el-button @click="submit" type="primary">编辑</el-button>
              <el-button @click="reset" type="default">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <div class="block">
            <!-- 分页 -->
            <el-pagination
              style="margin-top: 20px"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="pageSize"
              layout="total,  prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </template>
    </el-card>
  </div>
</template>

<script>
import {getGoodsListReq} from '@/api/goods'
export default {
  data() {
    return {
      imgUrl: '',
      tableData: [],
      // 总页数
      total: 0,
      currentPage: 1,
      // 每页显示
      pageSize: 3,
      category: '',
      name: '',
      API: 'http://sell.h5.itsource.cn:8087',
    }
  },
  methods: {
    async getData() {
      let currentPage = this.currentPage
      let pageSize = this.pageSize
      let res = await getGoodsListReq({
        currentPage,
        pageSize,
      })
      //解构数据
      let {data, total} = res.data
      //数据赋值
      this.total = total
      this.tableData = data

      console.log('this.formData.imgUrl :>> ', this.tableData)

      //如果当前data为[空数据] &&当前页不等于1  那么页数自动-1（也就是返回当上一页）
      if (data.length === 0 && this.currentPage !== 1) {
        this.currentPage--
        this.getData()
      }
    },
    submit() {},
    reset() {},

    //改变页码
    handleSizeChange(val) {
      //页码
      //拿到当前每条页面条数  赋值给pageSize
      this.pageSize = val
      //2 拉取数据
      this.getData()
    },
    //改变当前页
    handleCurrentChange(val) {
      //1.赋值给currentPage
      this.currentPage = val
      //2 拉取数据
      this.getData()
    },
  },
  created() {
    this.getData()
  },
}
</script>

<style lang="scss" scoped></style>
